<div th:fragment="header" xmlns:th="http://www.w3.org/1999/xhtml">
    <meta charset="utf-8">
	<link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/css/approval/public.css"/>
    <link href="/css/plugins/toastr/toastr.min.css" rel="stylesheet">
    <link href="/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/approval/box.css">
	<link rel="stylesheet" href="/css/plugins/jQueryUI/jquery-ui.css"/>
    <link rel="stylesheet" href="/css/approval/tableCheckboxStyle.css">
    <link rel="stylesheet" type="text/css" href="/css/plugins/easyui/easyui.css">
    <link rel="stylesheet" type="text/css" href="/css/plugins/easyui/icon.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</div>
<div th:fragment="main">
    <div id="westMaster" data-options="region:'west',split:true,border:false,minWidth:750,maxWidth:850">
        <div id="notSelectCkDiv" class="main_toal_box">
            <div class="main_toal_left">
                <div class="main_toal_font">
                    Total <span v-cloak>{{total}}</span>
                </div>
                <div class="main_toal_select">
                    <div class="btn-group" id="statusSelect">
                      <span class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        All <span class="caret"></span>
                      </span>
                      <ul class="dropdown-menu">
                          <li data-value="">All</li>
                          <li data-value="1">In progress</li>
                          <li data-value="2">Approval completed</li>
                          <li data-value="3">Reject</li>
                          <li data-value="5">Arbitrary decision</li>
                          <li data-value="6">Post approval completed</li>
                          <li data-value="4">Cancel submission</li>
                      </ul>
                      <input type="hidden" id="statusSelectValue">
                    </div>
                    <div class="btn-group" id="ctgSelect">
                        <span class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Categories <span class="caret"></span>
                        </span>
                        <ul class="dropdown-menu">
                          <li class='dropdown-item' data-value=''  data-color='black'><i class='fa fa-tag fa-lg fa-lg' style='color: black;' aria-hidden='true'></i>&nbsp;&nbsp;&nbsp;All</li>
                          <li class='dropdown-item' data-value='1' data-color='red'><i class='fa fa-tag fa-lg fa-lg' style='color: red;' aria-hidden='true'></i>&nbsp;&nbsp;&nbsp;Urgent</li>
                          <li class='dropdown-item' data-value='2' data-color='#0096D6'><i class='fa fa-tag fa-lg fa-lg' style='color: #0096D6;' aria-hidden='true'></i>&nbsp;&nbsp;&nbsp;Important</li>
                          <li class='dropdown-item' data-value='3' data-color='green'><i class='fa fa-tag fa-lg fa-lg' style='color: green;' aria-hidden='true'></i>&nbsp;&nbsp;&nbsp;General</li>
                        </ul>
                        <input type="hidden" id="ctgSelectValue">
                    </div>
                </div>
            </div>
            <div class="main_search_right">
                <div class="main_search btn-group" tabindex="0">
                    <input class="dropdown-toggle"  aria-haspopup="true" aria-expanded="false" type="search" name="searchName" id="searchName" placeholder="Search" autocomplete="off"/>
                    <span class="searchIcon"><i class="fa fa-search" aria-hidden="true"></i></span>
                    <ul class="search dropdown-menu">
                        <li class='dropdown-item' >Search by</li>
                        <div class='dropdown-divider'></div>
                        <li class='dropdown-item' id="title" value="title">Title: <span class="searchText">{{title}}</span></li>
                        <li class='dropdown-item' id="author" value="author">Author: <span class="searchText">{{author}}</span></li>
                        <li class='dropdown-item' id="receiptDate" value="receiptDate">Receipt date: <span class="searchText">{{receiptDate}}</span></li>
                        <li class='dropdown-item' id="submissionDate" value="submissionDate">Submission date: <span class="searchText" >{{submissionDate}}</span></li>
                        <li class='dropdown-item' id="creationDate"  value="creationDate">Creation date: <span class="searchText">{{creationDate}}</span></li>
                        <li class='dropdown-item' id="approvalDate" value="approvalDate">Approval date: <span class="searchText">{{approvalDate}}</span></li>
                    </ul>
                </div>
                <!--<div class="detail_btn">Detail</div>-->
                <div class="refresh_btn"><i class="fa fa-refresh" aria-hidden="true"></i></div>
            </div>
        </div>
        <div id="selectCkDiv" class="main_toal_box" hidden>
            <span v-cloak>{{selectRowsTotal}} selected </span><a href="#" onclick="unCheckEvent()">Uncheck</a>
            <button id="batchDelBtn" type="button" class="batch_delete_btn" onclick="batchDelMail()">Delete</button>
        </div>
        <table id="dataTable" data-height="" data-mobile-responsive="false" ></table>
    </div>
    <div id="centerDetail" data-options="region:'center',border:false">
        <div class="detailTop">
            <div id="noSelected" style="padding: 45px 0 0 20px;">
                <!--<el-button>Button</el-button>-->
                <div style="font-weight: 700;color:#000;">No documents selected.</div>
                <span>Please select documents to display on the read window.</span>
            </div>
            <div id="selected">
                <div class="main_font_right">
                    <button id="collapseBtn" title="Expand view window"><i class='fa fa-arrow-left'></i><i class='fa fa-arrow-right hidden'></i></button>
                    <button id="apvBtn" onclick="doApproved()">Approved</button>
                    <button id="cstBtn" onclick="doConsent()">Consent</button>
                    <button id="rejBtn" onclick="doReject()">Reject</button>
                    <button id="arbBtn" onclick="doArb()">Arbitrary decision</button>
                    <button id="cancelBtn" onclick="cancelSubmission()">Cancel submission   </button>
                    <button id="editBtn" onclick="editApproval()">Edit approval   </button>
                    <button id="inquiryBtn" onclick="inquiryMail()">Status inquiry</button>
                    <button id="delBtn" onclick="delMail()">Delete</button>
                    <button>...</button>
                    <div class="topActionIcon">
                        <!--<span id="zoomBtn" data-toggle="dropdown"><i class="fa fa-search-plus" aria-hidden="true"></i></span>
                        <ul class="dropdown-menu pull-right">
                            <li class='dropdown-item'><input type="range" min="50" max="200" value="100" id="myRange"></li>
                        </ul>-->
                        <span id="printBtn"><i class="fa fa-print" aria-hidden="true"></i></span>
                        <span id="foldTopBtn"><i class='fa fa-angle-down fa-lg'></i><i class='fa fa-angle-up hidden fa-lg'></i></span>
                    </div>
                </div>
                <div class="detailTitle">
                    <span id="detailTopTitle"></span>
                    <span id="detailTopTag"></span>
                </div>
                <div class="detailAuthorAndTime">
                    <img src="/img/approval/user_icon.jpg"/>
                    <span id="detailAuthor">Liuxiaodong</span>

                    <div class="detailIcons">
                        <div class='detailMark'>
                            <i  class='fa fa-tag fa-lg fa-lg' id='detailMarkColor' data-toggle='dropdown' aria-haspopup='true'  aria-expanded='false' aria-hidden='true'></i>
                            <ul class='dropdown-menu pull-left'>
                                <li class='dropdown-item' data-value='1' data-color='red'><i class='fa fa-tag fa-lg fa-lg' style='color: red;' aria-hidden='true'></i>&nbsp;&nbsp;&nbsp;Urgent</li>
                                <li class='dropdown-item' data-value='2' data-color='#0096D6'><i class='fa fa-tag fa-lg fa-lg' style='color: #0096D6;' aria-hidden='true'></i>&nbsp;&nbsp;&nbsp;Important</li>
                                <li class='dropdown-item' data-value='3' data-color='green'><i class='fa fa-tag fa-lg fa-lg' style='color: green;' aria-hidden='true'></i>&nbsp;&nbsp;&nbsp;General</li>
                                <div class='dropdown-divider'></div>
                                <li class='dropdown-item' data-value='0' data-color='#DCDCDC'><i class='fa fa-tag fa-lg fa-lg' style='color: #DCDCDC;' aria-hidden='true'></i>&nbsp;&nbsp;&nbsp;Deselect</li>
                            </ul>
                        </div>

                        <span id="detailFileIco"><i class="fa fa-paperclip" aria-hidden="true"></i></span>

                        <span id="detailTime">2018-09-10 12:22:11</span>

                    </div>
                </div>
            </div>
        </div>

        <div class="detailBody">
            <div id="attachmentInfo">
                <button id="saveAllBtn">Save</button>
                <ul id="attachmentList">
                </ul>
            </div>
            <div id="detailInfo">
                <button id="foldBtn"><span id="foldLineSpan" style="margin-right: 5px">Fold approval line</span><i class='fa fa-angle-down'></i><i class='fa fa-angle-up hidden'></i></button>
                <span class="compNum">
                    <label>Completion Number :&nbsp;</label><span id="comNum">EP-8CD22B5545CA4609B0C50F039DBCBAFA</span>
                </span>
                <span id="appIdSpan" style="display:none;"></span>
                <span id="appLineIdSpan" style="display:none;"></span>
            </div>
            <table id="approvalLinesTable" data-mobile-responsive="false"></table>
            <div id="contentText" class="summernote"></div>
            <div class="media-pdf">

            </div>
            <div class="media-office">
                <iframe src='' width='100%' height='100%' frameborder='1' style="display:none;">
                </iframe>
            </div>
        </div>

        <div class="easy-area">
            <ul>
                <!--<li hidden onclick="maxEvent(this)" title="maximize"><i class="fa fa-arrows-alt"></i><i class="fa fa-compress hidden"></i></li>-->
                <li hidden onclick="printBtn.click()" title="print"><i class="fa fa-print" aria-hidden="true"></i></li>
                <li hidden onclick="zoomOutEvent()" title="zoom out"><i class="fa fa-search-minus" aria-hidden="true"></i></li>
                <li hidden onclick="zoomInEvent()" title="zoom in"><i class="fa fa-search-plus" aria-hidden="true"></i></li>
                <li class="easyLi"><i class="fa fa-paper-plane-o" aria-hidden="true"></i></li>
            </ul>
        </div>
    </div>
</div>
<div th:fragment="footer">
	<script src="/js/jquery.min.js?v=2.1.4"></script>
		<!-- vue -->
	<script src="/js/vue.min.js"></script>
	<script src="/js/plugins/easyui/jquery.easyui.min.js"></script>
    <script src="/js/bootstrap.min.js?v=3.3.6"></script>
	<script src="/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
	<script src="/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
	<script src="/js/plugins/bootstrap-table/locale/bootstrap-table-locale-all.min.js"></script>
	<script src="/js/appjs/oa/webSocket/sockjs.min.js"></script>
	<script src="/js/appjs/oa/webSocket/stomp.min.js"></script>

    <script src="/js/plugins/mediaMaster/jquery.media.js"></script>
    <script src="/js/plugins/md5/jquery.md5.js"></script>
    <!-- Toastr script -->
	<script src="/js/plugins/toastr/toastr.min.js"></script>
	<script src="/js/plugins/summernote/summernote.min.js"></script>
	<script src="/js/plugins/summernote/summernote-zh-CN.js"></script>
    <script src="/js/plugins/layer/layer.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script src="/js/ajax-util.js"></script>
	<script src="/js/appjs/approval/common.js"></script>
</div>